<template>
	<view class="box">
		<u--image width="750rpx" height="698rpx" src="/static/image/login-bg.png"></u--image>
		<view class="content">
			<view class="logo d-flex d-row-center"><u--image width="138rpx" height="50rpx" src="/static/image/logo.png"></u--image></view>
			<view class="form">
				<view class="d-font-48"><text>密码登录</text></view>
				<view class="d-p-t-30">
					<u--input
						v-model="form.username"
						:customStyle="{
							padding: 0,
							height: '100rpx'
						}"
						border="bottom"
						placeholder="请输入账号"
						clearable
					></u--input>
				</view>
				<view class="d-p-t-30">
					<u--input
						v-model="form.password"
						:customStyle="{
							padding: 0,
							height: '100rpx'
						}"
						border="bottom"
						placeholder="请输入密码"
						password
						clearable
					></u--input>
				</view>
				<!-- <view class="d-flex d-font-24 d-m-t-24" style="color: #ADB4BD;">
					<view class="d-flex-1"></view>
					<text @click="forget">忘记密码</text>
				</view> -->
				<view class="d-flex d-m-t-20 d-font-24" style="color: #999;">
					<u-checkbox-group v-model="isRule"><u-checkbox activeColor="#21A5F3" shape="circle" size="24rpx" name="rule"></u-checkbox></u-checkbox-group>
					<view @click="setRule">我已阅读并同意</view>
					<text style="color: #21A5F3;" @click="rule('ys')">《隐私政策》</text>
					<view>和</view>
					<text style="color: #21A5F3;" @click="rule('sy')">《用户使用协议》</text>
				</view>
				<view class="d-text-center d-p-t-80 d-m-t-20">
					<u-button style="height: 84rpx;width: 500rpx;" text="登录" shape="circle" type="primary" @click="login"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { postLogin, getEncode, getUserInfo } from '../../common/api.js';

export default {
	data() {
		return {
			form: {
				username: '',
				password: ''
			},
			isRule: ['rule']
		};
	},
	onLoad() {
		let old = uni.getStorageSync('account') || {};
		this.form = {
			...this.form,
			...old
		};
	},
	methods: {
		setRule() {
			if (this.isRule.length > 0) {
				this.isRule = [];
			} else {
				this.isRule = ['rule'];
			}
		},
		rule(t) {
			uni.$u.route({
				url: '/pages/login/rule',
				params: {
					t
				}
			});
		},
		forget() {
			uni.$u.route({
				url: '/pages/login/forget'
			});
		},
		login() {
			uni.$u.vuex('$token', null);
			if (!this.form.username) {
				return uni.$u.toast('请输入登录账号');
			}
			if (!this.form.password) {
				return uni.$u.toast('请输入登录密码');
			}
			if (this.isRule.length <= 0) {
				return uni.$u.toast('请先阅读并同意《隐私政策》、《用户使用协议》');
			}
			uni.showLoading({
				title: '登录中...',
				mask: true
			});
			getEncode({
				params: {
					str: this.form.password
				}
			})
				.then(e => {
					return postLogin({
						...this.form,
						password: e.msg
					});
				})
				.then(e => {
					uni.$u.vuex('$token', e.token);
					return true;
				})
				.catch(e => {
					console.error(e);
					uni.hideLoading();
					uni.$u.toast('账户或密码错误,请查证后再试!');
				})
				.then(e => {
					if (e) {
						return getUserInfo({
							params: {
								appTerminal: 'bzz'
							}
						});
					}
				})
				.then(e => {
					uni.$u.vuex('$user', e.data);
					uni.hideLoading();
					if (e.data.isLoginApp && e.data.terminal == 'bzz') {
						uni.setStorageSync('account', this.form);
						uni.$u.toast('登录成功');
						uni.$u.route({
							url: '/pages/index/index',
							type: 'reLaunch'
						});
					} else {
						uni.$u.toast('该账户没有登陆权限!');
						uni.$u.vuex('$token', null);
					}
				});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	.box {
		min-height: 100%;
		.content {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			overflow: auto;
			.logo {
				padding-top: 240rpx;
			}
			.form {
				margin-top: 94rpx;
				background-color: #ffffff;
				border-radius: 60rpx;
				padding: 90rpx 64rpx;
				.d-font-48 {
					font-size: 48rpx;
					font-weight: bold;
					line-height: 48rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
}
</style>
